<template>
  <div class="ui-tabs">
    <div class="slide">
      <ul class="swiper-wrapper" :class="type?'center':''">
        <li class="swiper-slide" :class="{'active': idx == onIndex}" v-for="(tab,idx) in tabs" :key="tab.id" >
          <a href="javascript:void(0)" @click="pick(tab,idx)">{{tab.text}}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper';

  function getIndexById(arr, id) {
    let index = 0;
    for (let i = 0, len = arr.length; i++; i < len) {
      if (arr.id == id) {
        index = i;
        break;
      }
    }
    return index;
  }
  export default {
    name: 'ui-tabs',
    props: ['list', 'active','type'],
    data() {
      return {
        onIndex: this.$utils.getUrlKey("idx"),
        swiper: '',
        tabs: [],
        type:'',
        htmlName: location.pathname.replace(/\/(.+)\.html/, '$1') + 'NowTag'
      }
    },
    mounted() {
      this.tabs = this.list;

      console.log(this.type)
      this.$nextTick(()=>{
        this.swiper = new Swiper('.ui-tabs>.slide', {
          initialSlide: this.onIndex,
          freeMode: true,
          slidesPerView: 'auto',
          freeModeSticky: true,
        });
        this.swiper.slideTo(this.$utils.getUrlKey("idx"), 1000, false);
      })
    },

    methods: {
      pick(item, idx) {
        this.$emit('choose', item);
        this.onIndex = idx;
        // 返回上一页，记住tag
      }
    }
  }
</script>

<style lang="less">
  .ui-tabs {
    position: relative;
    flex: 1;
    z-index: 2;
    display: flex;
    height: 87px;
    box-sizing: content-box;
    border-bottom: 1px solid #efefef;
    background-color: #fff;

    &.sticky {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 999;
    }
    .slide {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    ul {
      display: flex;

      li {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 30px;
        flex-shrink: 0;
        a {
          font-size: 32px;
          color: #919191;
        }
        &.active a {
          color: #2086f9;
          font-weight: bold;

          &::before {
            content: '';
            position: absolute;
            bottom: 4px;
            left: 0;
            right: 0;
            margin: auto;
            width: 32px;
            height: 4px;
            border-radius: 3px;
            background-color: #2086f9;
          }
        }
      }
    }
  }
  .center{
    width:100%;
    li{
      width:33.3333%;
    }
  }
</style>